page {
  background-color: #23262D;

  // 图标 + 用户 + 会员中心
  .main {
    .header {
      position: relative;
      width: calc(100% - 80rpx);
      height: 343rpx;
      background-image: linear-gradient(122deg, #F25D85 9%, #F1A562 100%);
      border-radius: 0 0 58rpx 58rpx;
      padding: 40rpx;

      .setUp {
        width: 100%;
        text-align: right;

        .icon {
          width: 40rpx;
          height: 40rpx;
        }

        .icon:last-child {
          margin-left: 23rpx;
        }
      }

      .login {
        width: 200rpx;
        height: 100rpx;
        text-align: center;
        font-size: 50rpx;
        line-height: 100rpx;
        background-color: turquoise;
        box-shadow: 5rpx 5rpx #000;
        margin: 50rpx auto;
      }

      .user {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 45rpx;

        .left {
          display: flex;
          align-items: center;

          .img {
            width: 146rpx;
            height: 146rpx;
            border-radius: 50%;
          }

          .info {
            margin-left: 36rpx;
            font-size: 36rpx;
            color: #FFFFFF;

            .label {
              margin-top: 10rpx;
              opacity: 0.73;
              background: #33363D;
              border-radius: 10rpx;
              text-align: center;
              display: flex;
              align-items: center;
              padding: 0 10rpx;

              .text {
                font-size: 28rpx;
                color: #FFFFFF;
                margin-right: 10rpx;
              }

              .icon {
                width: 15.5rpx;
                height: 28rpx;
              }
            }
          }
        }

        .right {
          width: 40rpx;
          height: 40rpx;
        }
      }

      .member {
        width: calc(100% - 80rpx);
        height: 136rpx;
        position: absolute;
        left: 40rpx;
        bottom: -78rpx;
        background: #33363D;
        border-radius: 34rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        .info {
          display: flex;
          align-items: center;
          margin-right: 68rpx;
          color: #FFFFFF;

          .left {
            font-size: 36rpx;
          }

          .line {
            width: 2rpx;
            height: 94rpx;
            margin: 0 33rpx 0 21rpx;
            background-color: #979797;
            // border: 2px solid #979797;
          }

          .right {
            .text {
              opacity: 0.93;
              font-size: 28rpx;
            }

            .text:first-child {
              margin-bottom: 14rpx;
            }
          }
        }

        .icon {
          width: 57rpx;
          height: 62rpx;
          transform: rotate(30deg);
        }
      }
    }

    // 我的订单
    .order {
      margin-top: 128rpx;
      padding: 20rpx 40rpx 50rpx;
      background-color: #33363D;
      overflow: hidden;

      .top {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 60rpx;

        .left {
          font-size: 40rpx;
          color: #fff;
        }

        .right {
          display: flex;
          align-items: center;

          .text {
            opacity: 0.61;
            font-size: 28rpx;
            color: #FFFFFF;
          }

          .icon {
            width: 18rpx;
            height: 38rpx;
            opacity: 0.78;
            margin-left: 15rpx;
          }
        }
      }

      .order-list {
        display: flex;
        justify-content: space-around;

        .order-item {
          text-align: center;

          .img {
            width: 48rpx;
            height: 48rpx;
            vertical-align: top;
          }

          .text {
            margin-top: 30rpx;
            opacity: 0.93;
            font-size: 28rpx;
            color: #FFFFFF;
          }
        }
      }
    }

    // 其他
    .list {
      margin-top: 50rpx;
      margin-bottom: 200rpx;
      padding: 0 40rpx;
      background-color: #33363D;
      border-radius: 12rpx;
      overflow: hidden;

      .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 28rpx 0;
        overflow: hidden;

        .text {
          font-size: 32rpx;
          color: #FFFFFF;
        }

        .icon {
          width: 15rpx;
          height: 30rpx;
          opacity: 0.78;
        }
      }
    }
  }
}